<template>
  <div id="app">
    <my-header @addTodos="addTodos"></my-header>
    <my-list
      :todos="todos"
      :checkTodo="checkTodo"
      :deleteTodo="deleteTodo"
    ></my-list>
    <my-footer
      :todos="todos"
      @checkAllTodo="checkAllTodo"
      @clearAllTodo="clearAllTodo"
    ></my-footer>
  </div>
</template>

<script>
import myHeader from "./components/myHeader";
import myList from "./components/myList";
import myFooter from "./components/myFooter";
export default {
  name: "App",
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos'))||[]
    };
  },
  components: {
    myHeader,
    myList,
    myFooter,
  },
  methods: {
    addTodos(todoObj) {
      this.todos.unshift(todoObj);
    },
    checkTodo(id) {
      this.todos.forEach((todos) => {
        if (todos.id === id) todos.done = !todos.done;
      });
    },
    deleteTodo(id) {
      this.todos = this.todos.filter((todos) => {
        return todos.id !== id;
      });
    },
    checkAllTodo(done) {
      this.todos.forEach((item) => {
        item.done = done;
      });
    },
    updateTodo(id,title) {
      this.todos.forEach((item) => {
        if(item.id==id) item.title=title
      });
    },
    clearAllTodo() {
      this.todos=this.todos.filter((todo) => {
        return !todo.done;
      });
    },
  },
  watch:{
    todos:{
      handler(value){
        localStorage.setItem('todos',JSON.stringify(value))
      },
      deep:true
    }
  },
  mounted() {
    this.$bus.$on('updateTodo',this.updateTodo)
  },
  beforeDestroy() {
    this.$bus.$off('updateTodo')
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 600px;
  border: 1px solid #eee;
  padding: 8px;
  margin: 100px auto;
  border-radius: 8px;
}
ul li {
  list-style: none;
}
</style>
